<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>touch实现滑动条</title>
    <style>
        .slider-wrap {
            position: relative;
            width: 400px;
            height: 28px;
            background: #ccc;
            border-radius: 20px;
            margin:50px;
        }
        .slider-progress {
            width: 0px;
            background: red;
            height: 28px;
            border-radius:20px  0 0 20px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .slider-control {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            position: absolute;
            background: blue;
            top: -10px;
        }
    </style>
</head>
<body>
    <div class="slider-wrap">
        <div class="slider-progress"></div>
        <div class="slider-control"></div>
    </div>
    <script>
        let control = document.querySelector(".slider-control")
        let progress = document.querySelector(".slider-progress")
        let x = 0,
            minWidth = 0,
            maxWidth = 400;
        control.addEventListener('touchstart', (e) => {
            // console.log(e)
            x = e.touches[0].clientX - control.offsetLeft
        }, false)
        document.addEventListener('touchmove', (e) => {
            console.log(e)
            let moveLeft = e.touches[0].clientX - x
            if (moveLeft > maxWidth) {
                moveLeft = maxWidth
            }
            if (moveLeft < minWidth) {
                moveLeft = minWidth
            }
            control.style.left = moveLeft + 'px'
            progress.style.width = moveLeft + 'px'
            // control.style.top = e.touches[0].clientY - y + 'px'
        }, false)
    </script>
</body>
</html>
